<template>
    <dv-border-box-12 class="center">
        <div class="d-flex" style="margin-left:10px">
            <span>
                <span><i class="iconfont icon-align-left"></i></span>
            </span>
            <span class="fs-xl text mx-2 mt-1" style="font-size:19px;color: #eaedf3;">{{ title }}</span>
        </div>
        <div class="chart-scroll-container" ref="chartContainer">
        <dv-capsule-chart 
            :config="config"
            id="bar-chart"
            @chart-ready="handleChartReady"
        />
        </div>
    </dv-border-box-12>
</template>

<script lang=ts>
import { defineComponent, reactive, watch, PropType, nextTick, ref } from "vue";
export default defineComponent({
    components: {},
    props: {
        title: {
            type: String,
            default: "",
        },
        deptData: {
            type: Array as PropType<Array<{ name: string; value: number }>>,
            default: () => []
        }
    },
    setup(props) {
        // 初始化数据配置
        const config = reactive({
            data: [],
            rowNum: 5,
            showValue: true,
            xAxis: {
                show: false  // 隐藏x轴
            }
        });

    const chartContainer = ref<HTMLElement | null>(null);

    // 处理空行的方法 - 修复类型错误
    const handleEmptyRows = () => {
      if (!chartContainer.value) return;
      
      // 查找所有label-column下的div元素，并指定为HTMLElement类型
      const labelDivs = chartContainer.value.querySelectorAll<HTMLElement>('.label-column > div');
      
      labelDivs.forEach(div => {
        // 清除空白字符并检查是否为空
        const trimmedText = div.textContent?.trim() || '';
        // 检查是否为空或仅包含&nbsp;
        if (trimmedText === '' || trimmedText === '\u00A0') {
          div.style.display = 'none'; // 现在TypeScript能识别style属性了
        }
      });
    };

    // 图表就绪时处理
    const handleChartReady = () => {
      nextTick(handleEmptyRows);
    };

        // 监听数据变化并更新图表
        watch(
            () => props.deptData,
            (newData) => {
                config.data = newData;
                nextTick(handleEmptyRows);
            },
            { immediate: true, deep: true }
        );

        return {
            config,
            chartContainer,
            handleChartReady
        };
    },
});
</script>

<style lang="scss" scoped>
.center {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;  /* 添加相对定位以便子元素查找 */

    .d-flex {
        margin-top: 4%;
    }

    #bar-chart {
        font-size: 25px;
        width: 95%;
        height: 82%;
        margin: 0px auto;
    }
}

::v-deep .dv-capsule-chart {
   .unit-label {
      display: none;
    }
  }
</style>


    